<%= content_tag :div,
                id: "comment_#{model.id}",
                class: ["comment", "relative", ("top-comment" if top_comment_label.present?)].compact,
                role: "comment",
                data: { comment_id: model.id, parent: parent_element_id } do %>
  <% if model.hidden? %>
    <%= render :moderation_data %>
  <% elsif model.deleted? %>
    <%= render :deletion_data %>
  <% else %>
    <% if top_comment_label.present? %>
      <div class="most-upvoted-label label">
        <span><%= icon "star-s-line" %></span>
        <span><%= top_comment_label %></span>
      </div>
    <% end %>

    <div class="comment__header">
      <div class="sr-only"><%= comment_label %></div>

      <span class="font-bold">
        <%== cell("decidim/author", author_presenter) %>
      </span>
      <span class="text-gray-2 text-sm">
        <%= time_tag created_at, format: :decidim_short %>
      </span>
      <% if edited? %>
        <span class="label">
          <%= t("decidim.components.comment.edited") %>
        </span>
      <% end %>

      <div class="relative ml-auto">
        <button id="dropdown-trigger-<%= context_menu_id %>" data-controller="dropdown" data-target="dropdown-menu-<%= context_menu_id %>" aria-label="<%= t("decidim.components.comment.controls_label") %>">
          <%# NOTE: having two times the icon call is intentional, as that is how the `dropdown` CSS code is done %>
          <%= icon "more-fill" %>
          <%= icon "more-fill" %>
        </button>

        <div id="dropdown-menu-<%= context_menu_id %>" aria-hidden="true">
          <ul class="dropdown dropdown__bottom divide-y divide-gray-3">
            <% unless reloaded? %>
              <li class="dropdown__item">
                <%= cell("decidim/report_button", model, only_button: true, button_classes: "dropdown__button", modal_id: "flagModalComment#{model.id}") %>
              </li>
            <% end %>
            <li class="dropdown__item">
              <%= link_to "#{commentable_path("commentId" => model.id)}#comment_#{model.id}", class: "dropdown__button", target: "_blank", data: { "external-link": "text-only" }, title: t("decidim.components.comment.single_comment_link_title") do %>
                <%= icon "share-line" %>
                <span><%= t("decidim.components.comment.single_comment_link_title") %></span>
              <% end %>
            </li>
            <% if model.authored_by?(current_user) %>
              <li class="dropdown__item">
                <button type="button" data-dialog-open="<%= "editCommentModal#{model.id}" %>" class="dropdown__button" title="<%= t("decidim.components.comment.edit") %>" aria-controls="<%= "editCommentModal#{model.id}" %>" aria-haspopup="dialog">
                  <%= icon "edit-line" %>
                  <span><%= t("decidim.components.comment.edit") %></span>
                </button>
              </li>
              <li class="dropdown__item">
                <%= link_to comment_path, remote: true, method: :delete, class: "dropdown__button", data: { confirm: t("decidim.components.comment.confirm_destroy") } do %>
                  <%= icon "delete-bin-line" %>
                  <span><%= t("decidim.components.comment.delete") %></span>
                <% end %>
              </li>
            <% end %>
            <% if (extra_actions) %>
              <% extra_actions.each do |action| %>
                <li class="dropdown__item">
                  <%= link_to(*action) %>
                </li>
              <% end %>
            <% end %>
          </ul>
        </div>
      </div>
    </div>

    <div class="comment__content">
      <%= alignment_badge %>
      <div class="editor-content">
        <%= comment_body %>
      </div>
    </div>

    <div data-comment-footer data-controller="accordion" id="accordion-<%= model.id %>" class="relative">
      <div class="comment__footer-grid">
        <div class="comment__votes-actions">
          <%= render :actions %>
          <%= votes %>
        </div>
      </div>
      <div class="comment__reply-button">
        <% if depth.zero? && has_replies_in_children? %>
          <button class="button button__xs button__transparent-secondary border-white absolute top-4" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="false" id="comment-<%= model.id %>-replies-trigger">
            <span data-show-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.show_replies", count: replies.size) %>">
              <%= t("decidim.components.comment.answers", count: replies.size) %>
            </span>
            <%= icon "arrow-down-s-line" %>
            <span data-hide-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.hide_replies", count: replies.size) %>">
              <%= t("decidim.components.comment.answers", count: replies.size) %>
            </span>
            <%= icon "arrow-up-s-line" %>
          </button>
        <% end %>
      </div>
      <% if can_reply? %>
        <div id="panel-<%= reply_id %>" class="add-comment" data-additional-reply>
          <%== cell("decidim/comments/comment_form", model, root_depth:, order:) %>
        </div>
      <% end %>
      <div id="comment-<%= model.id %>-replies" class="<%= "comment-reply" if has_replies_in_children? %>">
        <% if has_replies_in_children? %>
          <%= render :replies %>
        <% end %>
      </div>
    </div>
  <% end %>
  <% if current_user.present? %>
    <%= cell("decidim/report_button", model, modal_id: "flagModalComment#{model.id}").flag_modal %>
  <% end %>

  <% if model.authored_by?(current_user) %>
    <%= cell("decidim/comments/edit_comment_modal_form", model) %>
  <% end %>
<% end %>
